<template>
	<div>
		<div>
			<el-form label-width="80px">
				<el-form-item prop="foodName">
					<el-checkbox v-model="normsStatus" @change="useMoreFlavor">
						启用多口
						<span style="color: red">(如多辣，少盐)</span>
					</el-checkbox>
				</el-form-item>
			</el-form>
			<el-table :data="tableData" v-show="moreFlavorVisible">
				<el-table-column prop="specsName" label="口味">
					<template slot-scope="scope">
						<el-input @input="keepFlavor" v-model="scope.row.flavorName"></el-input>
					</template>
				</el-table-column>
				<el-table-column fixed="right" label="操作">
					<template slot-scope="scope">
						<el-button @click.native.prevent="deleteRow(scope.$index, tableData)" type="text" size="small">移除</el-button>
					</template>
				</el-table-column>
			</el-table>

			<div style="padding-top: 30px" align="center" v-show="moreFlavorVisible"><el-button type="success" @click="addFlavor">新增口味</el-button></div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'food_specs',
	data() {
		return {
			flavor: '份',
			normsStatus: '',
			moreFlavorVisible: false,
			tableData: [
				{
					id: '',
					flavorName: ''
				}
			]
		};
	},

	methods: {
		initData(data) {
			this.tableData = data.flavorList;
			if (data.normsStatus === 1) {
				this.normsStatus = true;
				this.moreFlavorVisible = true;
			} else {
				this.normsStatus = false;
				this.moreFlavorVisible = false;
			}
		},
		//使用多规格
		useMoreFlavor() {
			this.moreFlavorVisible = this.normsStatus === true;
			if (this.normsStatus === false) {
				let json = {
					moreFlavor: false,
					data: this.tableData
				};
				this.$emit('getFlavorList', json);
			} else {
				let json = {
					moreFlavor: true,
					data: this.tableData
				};
				this.$emit('getFlavorList', json);
			}
		},

		//新增规格
		addFlavor() {
			let json = {
				id: '',
				flavorName: ''
			};
			this.tableData.push(json);
		},

		keepFlavor() {
			let json = {
				moreFlavor: true,
				data: this.tableData
			};
			this.$emit('getFlavorList', json);
		},

		deleteRow(index, rows) {
			rows.splice(index, 1);
		}
	}
};
</script>

<style scoped></style>
